<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Mobile Preview </title>
		<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/lightbox2/2.7.1/css/lightbox.css" />

		<style>
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, button, input, textarea, th, td {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f4f4f4;
}

.wrap {
}

.phone-sim {
	width: 478px;
	height: 800px;
	vertical-align: middle;
	display: inline-block;
	text-align: left;
	position: relative;
}

.demo {
	width: 433px;
	height: 884px;
	background: url(iphone6-demo-bg.png) no-repeat 0 0;
}

.frame {
	margin-left: 29px;
	margin-top: 183px;
	width: 375px;
	height: 592px;
	background-color: #fff;
	border: 0px;
}

.info {
	display: inline-block;
	width: 800px;
	height: 884px;
	overflow-y: auto;

	position: absolute;
	top: 10px;
}

li {
	list-style-type: none;
}

.nav-list {
	border: 1px solid #cecece;
	background: #f4f4f4;
}

.clearfix:after {
	content: '';
	visibility: hidden;
	clear: both;
	display: block;
	height: 0;
}

.nav-item {
	width: 109px;
	height: 42px;
	line-height: 42px;
	border-right: 1px solid #cecece;
	cursor: pointer;

	text-align: center;
}

.nav-item.active {
	background: #fff;
}

.content-item {
	margin-bottom: 60px;
	min-height: 400px;
}

.content-info {

}

.content-info h3 {
	border-bottom: 1px solid #cecece;
	font-weight: 400;
	margin-top: 30px;	
}

.content-info h3 span {
	margin: 0 0 -1px 20px;
	padding: 10px 10px 10px 50px;
	font-size: 19px;
	border-bottom: 3px solid #2d88e5;
	display: inline-block;
}

.opt-btn {
	height: 31px;
	line-height: 31px;
	font-size: 15px;

	cursor: pointer;
	border: 1px solid #2773bf;
	background-color: #2d88e5;
	color: #fff;

	width: 88px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	border-radius: 2px;
}

.opt-btn.btn-middle {
	width: 150px;
}

.opts {
}

.opt-btn:active {
    background: #2875c5
}

.opt-btn:hover {
    background: #549de9;
    text-decoration: none
}

.fl {
	float: left;
}

.dn {
	display: none;
}
		</style>
	</head>

	<body>
		<div class="wrap">

			<div class="phone-sim">

				<div class="demo">
					<iframe id="demo-frame" src="/wx/ind/delivery/index" class="frame"></iframe>
				</div>

			</div>

			<div class="info">
			
				<div class="input">
					<ul class="nav-list clearfix"> 
						<li class="nav-item fl active">Tab1</li> 
						<li class="nav-item fl">Tab2</li> 
					</ul> 

					<div class="content-item"> 
						<div class="content-info"> 
							<h3><span>页面内容</span></h3> 
							<div>
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
							</div>
						</div>
					</div>

					<div class="content-item dn"> 
						<div class="content-info"> 
							<h3><span>页面内容2</span></h3> 
							<div>
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
								xxx
								<br />
							</div>
						</div>
					</div>

				</div>

				<div class="opts">
					<span class="opt-btn" id="btn-refresh">刷新页面</span>
					<span class="opt-btn btn-middle" id="btn-save">保存并生成二维码</span>
				</div>

			</div>
		 
		</div>

		<div class="qr-img-wrap dn">
			<a data-lightbox="image-1" data-title="二维码" 
				href="/store/img/1426663440743-9986.jpg" title="">xxx</a>
		</div>
  
	</body>
</html>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/lightbox2/2.7.1/js/lightbox.min.js"></script>

<script type="text/javascript">
var tplId = 1;

$(function(){
	$('.nav-item').click(function(e){
		var index = $('.nav-item').index(this);

		$('.nav-item').removeClass('active').eq(index).addClass('active');
		$('.content-item').addClass('dn').eq(index).removeClass('dn');
	});

	$('#btn-refresh').click(function(){
		var data = {};

		// direct use data
		var frameWin = $('#demo-frame')[0].contentWindow;
		frameWin.refresh(data);

//		$.ajax({
//			url: '/wx/store/preview-refresh/' + tplId,
//			type: 'POST',
//			async: true,
//			contentType: 'application/json', 
//			data: JSON.stringify(data),
//			error: function(xhr){
//			},
//
//			success: function(data){
//			}
//		});
	});

	$('#btn-save').click(function(){
		var data = {};

		$.ajax({
			url: '/wx/store/preview-save/' + tplId,
			type: 'POST',
			async: true,
			contentType: 'application/json', 
			data: JSON.stringify(data),
			error: function(xhr){
			},

			success: function(data){
				var tmpQrId = data.tmpQrId;
				$('#qr-img-wrap a').attr('href', '/wx/store/preview-qr-img/' + tmpQrId).trigger('click');
			}
		});
	});

});
</script>